<template>
  <div class="area-component flex flex-wrap gap-[8px]">
    <!-- 省 -->
    <el-select placeholder="省份" style="border-color: var(--text-color-title);" v-model="state.params.province"
      class="h-[36px] flex-1 min-w-[128px] xwsm:(mb-[24px]) xwmd:(mb-[0px])">
      <el-option class="h-[36px]" v-for="item in state.showData.province" :key="item.code" :label="item.name"
        :value="item.code" />
    </el-select>
    <!-- 市 -->
    <el-select placeholder="城市" class="h-[36px] flex-1 min-w-[128px] xwsm:(mb-[24px] mx-0) xwmd:(mb-[0px] mx-[0px])"
      :disabled="!state.params.province" v-model="state.params.city">
      <el-option v-for="item in state.showData.cities" :key="item.code" :label="item.name" :value="item.code" />
    </el-select>
    <!-- 区 -->
    <el-select placeholder="区" class="h-[36px] flex-1 min-w-[128px] xwsm:(mb-[0px]) xwmd:(mb-[0px])"
      :disabled="!state.params.province || !state.params.city" v-model="state.params.area">
      <el-option v-for="item in state.showData.areas" :key="item.code" :label="item.name" :value="item.code" />
    </el-select>
  </div>
</template>

<script setup lang='ts'>
import { reactive, onBeforeMount, computed, watch, defineExpose } from 'vue'
import areaData from '@/components/myArea/data/pca-code.json'

// 定义数据类型
export interface areaType {
  code: string
  name: string
  children?: areaType[]
}

// 父组件爱传过来的事件，用于接收省市区选择后的数据
const emits = defineEmits<{
  (e: 'areaChange', value: any): void
  (e: 'celarArea', value: any): void
}>()

const state = reactive({
  // 用于展示的省市区数据
  showData: {
    province: [] as areaType[],
    cities: [] as areaType[],
    areas: [] as areaType[],
  },
  // 最终选择的省市区
  params: {
    province: undefined,
    city: undefined,
    area: undefined
  }
})
// 准备省市区展示数据
onBeforeMount(() => {
  state.showData.province = areaData.map((item) => ({ code: item.code, name: item.name }))
})
state.showData.cities = computed(() => {
  return areaData.find((item) => item.code === state.params.province)?.children
}) as any
state.showData.areas = computed(() => {
  return state.showData.cities?.find((item) => item.code === state.params.city)?.children
}) as any

// 监听省、市、地区的变化的变化
watch(() => state.params.province, () => {
  console.log(state.params, 'state.params')
  state.params.city = undefined
  state.params.area = undefined
  emits('celarArea')
})
watch(() => state.params.city, () => {
  state.params.area = undefined
  emits('celarArea')
})
watch(() => state.params.area, (val) => {
  // 区有值的时候，省市必定有值，此时就可以将数据返回给父组件
  if (val) {
    // 组装数据
    const paramsData = {
      province: {} as areaType,
      city: {} as areaType,
      area: {} as areaType
    }
    let tmp = areaData.find((item) => item.code === state.params.province)
    paramsData.province.name = tmp?.name as string
    paramsData.province.code = tmp?.code as string
    tmp = tmp?.children.find((item) => item.code === state.params.city) as any
    paramsData.city.name = tmp?.name as string
    paramsData.city.code = tmp?.code as string
    tmp = tmp?.children.find((item) => item.code === state.params.area) as any
    paramsData.area.name = tmp?.name as string
    paramsData.area.code = tmp?.code as string

    // 出触发父组件事件，传数据过去
    emits('areaChange', paramsData)
  }
})



const clearFrom = (form) => {
  console.log(form, ' form')
  state.params.province = form.province

  setTimeout(() => {
    state.params.city = form.city
  }, 200)
  setTimeout(() => {
    state.params.area = form.area
  }, 200)
  console.log(state.params, ' state.params.')
}


defineExpose({
  clearFrom
})
</script>
<style scoped>
:deep(.el-input__wrapper) {
  height: 36px;
}

:deep(.el-input__wrapper) {
  /* border: 1px solid var(--text-color-title); */
  /* box-shadow: 0 0 0 1px var(--el-input-border-color, var(--text-color-title)) inset !important; */
}
</style>